<!DOCTYPE html>
<!--
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->
<!--
Trefoil 1.0 Developmental
Project Trefoil (http://trefoil.shiroyuki.com)

Development and Copyright: Juti Noppornpitak <juti_n@yahoo.co.jp> and Panote Siriaraya <spanote@gmail.com>
Dual-licensed in GNU GPL 2 and MIT License.
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Trefoil 1.0</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="sessions?identifier"></script>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookies-1.0.js"></script>
    <script type="text/javascript" src="js/shiroyuki.tooltip.js"></script>
    <script type="text/javascript" src="js/dictionary.js"></script>
    <script type="text/javascript" src="js/action.js"></script>
    <script type="text/javascript" src="js/dialog.js"></script>
    <script type="text/javascript" src="js/ui.js"></script>
    <script type="text/javascript" src="js/user.js"></script>
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/trefoil.js"></script>
</head>
<body>
<div id="controller-underlay"></div>
<div id="controller">
    <h1>
        <span id="user-id">Welcome to Trefoil</span>
    </h1>
    <ul class="sl-auth">
        <li><a id="a-browse"><span>Browse</span></a></li>
        <li><a id="a-add-files"><span>Add files</span></a></li>
        <li><a id="a-site-info"><span>View site information</span></a></li>
        <li><a id="a-user-info" href="#"><span>Edit profile</span></a></li>
        <li><a id="a-signout"><span>Sign out</span></a></li>
    </ul>
    <ul class="sl-nauth">
        <li class="e-selected"><a id="a-signin"><span>Sign in</span></a></li>
        <li><a id="a-password-retrieval"><span>Forgot password</span></a></li>
        <li><a id="a-signup"><span>Sign up</span></a></li>
    </ul>
    <ul class="no-sl">
        <li><a id="a-sysabout"><span>About</span></a></li>
        <li><a id="a-language-switch"><span>Change Language</span></a></li>
    </ul>
</div>
<div id="display">
    <div id="user-io">
        <h2>Let's get started</h2>
        <div id="signin">
            <h3>Authentication</h3>
            <form action="sessions" method="post">
                <label for="key">E-mail adress or user name</label>
                <input type="text" name="key" id="key" />
                <label for="password">Password</label>
                <input type="password" name="password" id="password" />
                <button type="submit">Sign in</button>
            </form>
            <div id="sysreq">
                <p>Minimum Requirement:</p>
                <ul>
                    <li>Apple Safari 3.2+</li>
                    <li>Mozilla Firefox 3.5</li>
                    <li>Opera 10</li>
                    <li>Microsoft Internet Explorer 8</li>
                </ul>
            </div>
        </div>
        <div id="password-retrieval">
            <h3>Password Recovery</h3>
            <form action="passwordRetrieval" method="post" style="display: none;">
                <label for="pr-key">E-mail adress or user name</label>
                <input type="text" name="pr-key" id="pr-key" />
                <button type="submit">Mail me the password</button>
            </form>
            <p>Currently, this function is not available. Please contact the administrator.</p>
        </div>
        <div id="signup">
            <h3>Registration</h3>
            <form id="terms" action="#">
                <div></div>
                <p>
                    <label for="termsOK" style="display: inline;">I am agree and I would like to</label>
                    <button type="submit" id="termsOK">continue</button>
                </p>
            </form>
            <form id="registrationForm" action="users" method="post">
                <label for="rf-name">Real name</label>
                <input type="text" name="rf-name" id="rf-name" />
                <label for="rf-email">E-mail adress</label>
                <input type="text" name="rf-email" id="rf-email" />
                <label for="rf-username">User name</label>
                <input type="text" name="rf-username" id="rf-username" />
                <label for="rf-password">Password</label>
                <input type="password" name="rf-password" id="rf-password" />
                <label for="rf-verpass">Confirm password</label>
                <input type="password" name="rf-verpass" id="rf-verpass" />
                <button id="b-signup" type="submit">Sign up</button>
            </form>
        </div>
        <p id="user-io-footer">
            <strong>Trefoil</strong> is dual-licensed under GNU General Public
            Library 2 and MIT License. There is no absolute warranty whether the
            software works as perfectly as expected. <strong>Trefoil</strong> is
            copyrighted by Juti Noppornpitak and Panote Siriaraya. <strong>
            Trefoil</strong> is based on <strong>jQuery</strong> and
            <strong>Pylons</strong>. The user experience of <strong>Trefoil
            </strong> is designed for Mozilla Firefox 3.5 or Apple Safari 4.
            The user experience on any older versions of Mozilla Firefox or
            Apple Safari may be very slightly reduced or seemlessly reduced.
            The user experience on any other browsers can be varyingly reduced,
            depending on the capability to support CSS 3.
        </p>
    </div>
    <div id="browser" class="view-tn">
        <div id="browser-panel">
            <div id="browser-tool">
                <ul>
                    <li><a id="a-select-all">Select all</a></li>
                    <li><a id="a-select-none">Select none</a></li>
                    <li><a id="a-create-folder">New folder</a></li>
                    <li><a id="a-stock"><span></span>Selected items &nbsp;</a></li>
                    <li><a id="a-reset-stock">Forget selected items</a></li>
                    <li><a id="a-move">Move</a></li>
                    <li><a id="a-delete">Delete</a></li>
                </ul>
            </div>
            <form id="browser-filter">
                <a><img src="images/button-cancel.png" height="26" /></a><input type="text"/>
            </form>
        </div>
        <h2>&nbsp;</h2>
        <div id="browser-mode">
            <h3>View Mode</h3>
            <ul>
                <li><a id="a-view-be">Bird Eye</a></li>
                <li><a id="a-view-tn" class="e-selected">Thumbnail</a></li>
            </ul>
        </div>
        <div id="browser-suggest"></div>
        <div id="browser-stock">
            <h3>Stock</h3>
            <ul id="browser-stock-list"></ul>
        </div>
        <div id="browser-forest">
            <h3>Directories</h3>
            <ul id="directories"></ul>
            <h3>Files</h3>
            <ul id="files"></ul>
        </div>
        <ul class="prototype">
            <li class="file entry">
                <a><img src="images/cfile.png" class="icon"/></a>
                <ul>
                    <li class="fn">&nbsp;</li>
                    <li class="ft">&nbsp;</li>
                    <li class="fs">&nbsp;</li>
                    <li class="commands">
                        <a class="c-a-remove-du-stock">Forget this</a>
                        <a class="c-a-download">Download</a>
                    </li>
                </ul>
            </li>
            <li class="directory entry">
                <a><img src="images/folder.png" class="icon"/></a>
                <ul>
                    <li class="dn">&nbsp;</li>
                    <li class="dt">Directory</li>
                    <li class="commands">
                        <a class="c-a-remove-du-stock">Forget this</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="uploader">
        <h2>Add new files</h2>
        <p>The upload limit is <span id="uploader-limit">20 B</span>. Any being uploaded file will be stored at <span id="uploader-location"></span>.</p>
        <form action="storages" method="post" enctype="multipart/form-data" target="proxy">
            <input type="hidden" name="userID" value="" />
            <input type="hidden" name="location" value="" />
            <ul id="upload-inputs">
                <li>
                    <input type="file" name="fileIO"/>
                </li>
                <li>
                    <input type="file" name="fileIO"/>
                </li>
                <li>
                    <input type="file" name="fileIO"/>
                </li>
                <li>
                    <input type="file" name="fileIO"/>
                </li>
                <li>
                    <input type="file" name="fileIO"/>
                </li>
            </ul>
            <button type="submit">Submit</button>
        </form>
        <iframe id="proxy" name="proxy" src="" style="display:none;width: 100%;"></iframe>
        <div class="prototype">
            <ul class="file-slot">
                <li>
                    <button class="gb-remove">remove</button>
                    <input type="file" name="fileIO"/>
                </li>
            </ul>
        </div>
    </div>
    <div id="site-info">
        <h2>Site information of <span></span></h2>
        <div id="site-info-dashboard">
            <div id="site-info-visual"><img src="..."/></div>
            <table>
                <tr>
                    <th>Address</th>
                    <td><a id="user-site"></a></td>
                </tr>
                <tr>
                    <th>Usage</th>
                    <td><span id="user-usage"></span></td>
                </tr>
                <tr>
                    <th>Quota</th>
                    <td><span id="user-quota"></span></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div id="dialog-screen"></div>
<div id="dialog">
    <div id="dialog-inner">
        <a id="dialog-close">&nbsp;</a>
        <div id="general-message"></div>
        <div id="create-folder" class="dialog-section">
            <h2>What is the name of the new folder?</h2>
            <form action="storages" method="post">
                <input type="text" name="new-folder" id="new-folder" size="25"/>
                <button type="submit">create</button>
            </form>
        </div>
        <div id="language-switch" class="dialog-section">
            <h2>Change the language</h2>
            <ul></ul>
            <p>Save your change first before<br/>switching to other language.</p>
        </div>
        <div id="sysabout" class="dialog-section">
            <h2><a href="http://trefoil.shiroyuki.com" target="_blank">Project Trefoil</a></h2>
            <p id="trefoil-logo">
                <img src="images/logo.png"/>
            </p>
            <p>
                &copy; 2009 Juti Noppornpitak and Panote Siriaraya. All rights
                reserved. Dual-licensed under GNU General Public License 2.1
                and MIT License.
            </p>
        </div>
    </div>
</div>
</body>
</html>
